<template v-if="sidebars && sidebars.length === 1">
    <button
        v-tooltip="{ message: sidebars[0].title, placement: 'right' }"
        class="sw-app-topbar-sidebar__icon"
        :class="{ 'sw-app-topbar-sidebar__icon-active': sidebars[0].active }"
        :aria-label="$tc('sidebar.ariaLabelButtonOpen')"
        @click="setActiveSidebar(sidebars[0].locationId)"
    >
        <mt-icon
            :name="sidebars[0].icon"
            :size="20"
        />
    </button>
</template>

<template v-if="sidebars.length && sidebars.length > 1">
    <sw-context-button>
        <template
            v-for="sidebar in sidebars"
            :key="sidebar.title"
        >
            <sw-context-menu-item
                @click="setActiveSidebar(sidebar.locationId)"
            >
                <mt-icon
                    :name="sidebar.icon"
                    :size="14"
                />
                {{ $t(sidebar.title) }}
            </sw-context-menu-item>
        </template>
    </sw-context-button>
</template>
